<template>
    <div class="login-page">
        <Particles
            id="tsparticles"
            :options="particlesOption"
        />
        <div class="login-box">
            <img src="@/assets/images/index/logo.png" alt="">
            <div class="title">航班天气因素上座情况预测分析软件</div>
            <div class="box-item">
                <i class="iconfont icon-yonghuming"></i>
                <input type="text" placeholder="请输入用户名" v-model="formData.username" @keydown="clickEnterKey">
            </div>
            <div class="box-item">
                <i class="iconfont icon-mima"></i>
                <input type="password" placeholder="请输入密码" v-model="formData.password" @keydown="clickEnterKey">
            </div>
            <div class="login-btn" @click="login">登录</div>
        </div>
    </div>
</template>
<script>
import { reactive, toRefs, inject } from 'vue'
import { useRouter } from 'vue-router'
import particlesOption from '../../utils/particles'
export default {
    setup () {
        const ElMessage = inject('ElMessage')
        const Cookies = inject('Cookies')
        const router = useRouter()
        const data = reactive({
            // 表单
            formData: {
                username: '',
                password: '',
            },
            // 窗口高度
            windowHeight:'100vh',
            // 粒子特效配置
            particlesOption:particlesOption,
        })

        // 登录
        function login()
        {
            if (data.formData.username != 'adrs') {
                ElMessage.error('用户名不正确')
                return
            }
            if (data.formData.password != '123456') {
                ElMessage.error('密码错误')
                return
            }
            Cookies.set('loginToken', 'adrs-123456', { expires: 3 })
            console.log(Cookies.get())
            // localStorage.setItem('loginToken', 'adrs-123456')
            router.push('/')
        }

        // 回车
        function clickEnterKey(e)
        {
            if (e.keyCode == 13) {
                login();
            }
        }

        return {
            ...toRefs(data),
            login,
            clickEnterKey,
        }
    },
}
</script>
<style scoped lang="scss">
.login-page {
    width:100%;
    height: 100vh;
    background: url('../../assets/images/bg_02.png');
    background-size:100% 100%;
    .login-box {
        width:520px;
        height:420px;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
        border-radius: 10px;
        background: rgba(9, 19, 66, 0.6);
        padding: 35px 30px 25px;
        text-align: center;
        // box-shadow: 0 0 25px rgb(255 255 255 / 50%);
        img {
            width: 35px;
            height: 39px;
            margin:10px auto;
        }
        .title {
            height:60px;
            line-height: 60px;
            color:#ffffff;
            font-size: 24px;
            text-align: center;
            color:#ffffff;
            letter-spacing: 1px;
        }
        .box-item {
            width:450px;
            margin:10px auto;
            color:#ffffff;
            display: flex;
            height: 60px;
            align-items: center;
            justify-content: center;
            i {
                font-size: 25px;
            }
            input {
                margin-left:5px;
                width:300px;
                height:30px;
                border:none;
                border-bottom: 1px solid rgba($color: #ffffff, $alpha: 0.2);
                background: transparent;
                outline: none;
                color:#ffffff;
                font-size: 18px;
                padding:0px 10px;
                letter-spacing: 1px;
                &::-webkit-input-placeholder {
                    color: rgba($color: #ffffff, $alpha: 0.3);
                }
            }
        }
        .login-btn {
            height:40px;
            width:120px;
            color:#ffffff;
            border-radius:20px;
            border:1px solid #ffffff;
            text-align: center;
            line-height: 40px;
            font-size: 18px;
            margin:30px auto 0px;
            cursor: pointer;
        }
    }
}
</style>